<template>
    <page class="movie">
        <page-header>猫眼电影</page-header>
        <ul class="topNav">
            <li :class="[pageType==0?'active':null]" @click="pageType=0">正在热映</li>
            <li :class="[pageType==1?'active':null]" @click="pageType=1">即将上映</li>
        </ul>
        <div class="bottomBar">
            <div class="bottomBar-swith" :class="{active:pageType==1}"></div>
        </div>
        <swiper ref="mySwiper" class="movieSweiper" :options="swiperOption">
            <swiper-slide class="seiperSlide">
                <b-scroll>
                    <movie-item @showImage="showMvoieListImage" v-for="(item,index) in movieList" :key="index" :mitem="item"></movie-item>
                </b-scroll>
                <!-- <button type="button" @click="showAction">显示actionSheet</button> -->
            </swiper-slide>
            <swiper-slide class="seiperSlide">

                <b-scroll>
                    <div class="hope" @touchstart.stop="" style="overflow:auto">
                        <div class="title">近期受期待的</div>
                        <div class="list" :style="{width:listWidth}">
                            <div class="l-item" v-for="(item,index) in hopeList" :key="index">
                                <img v-lazy="item.img.replace('w.h','128.180')" alt="">
                                <span class="mn">{{item.nm}}</span>
                                <span class="mt">{{item.comingTitle}}</span>
                            </div>
                        </div>
                    </div>
                    <movie-item @showImage="showComingImageList" v-for="(item,index) in comingList" :key="index" :mitem="item">
                        <template slot="title">{{item.comingTitle}}</template>
                    </movie-item>
                </b-scroll>
            </swiper-slide>
        </swiper>
    </page>
</template>

<script>
    import movieItem from "../components/movieItem"
    import BScroll from "../components/BScroll"
    export default {
        name: "movie",
        data() {
            return {
                pageType: 0,
                movieList: [],//正在热映
                movieListImage:[],//代表正在热映的图片
                comingList: [],//即将上映
                comingListImage:[],//即将热映的所有图片
                hopeList: [],//近期期待的
                listWidth: "100%"
            }
        },
        created() {
            this.getMovieList();
            this.getComingList()
            this.getHopeList()

        },
        watch: {
            pageType(newValue) {
                this.mySwiper.slideTo(newValue);
            },
            //手动去计算它的宽度
            hopeList(newValue) {
                this.listWidth = newValue.length * 1.9 + "rem"
            }
        },
        computed: {
            swiperOption() {
                var that = this
                return {
                    initialSlide: 0,
                    on: {
                        slideChange() {
                            that.pageType = this.activeIndex
                        }
                    }
                }
            },
            mySwiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        methods: {
            //通过vuexx里面的mapactions可以拿到vuex的store里面的showActionSheet的方法
            // ...mapActions(["showActionSheet"]),已经扩展到vue原型上边去了
            freshData(scroll) {
                console.log("我在外边监控");
                setTimeout(() => {
                    scroll.finishPullDown();
                    scroll.refresh();
                }, 5000)

            },
            getMovieList() {
                this.showLoading("正在登陆中");
                this.$http.get("/maoyanApi/ajax/movieOnInfoList").then(res => {
                    let movieList = res.data.movieList;
                    this.movieList = movieList;
                    //获取所有正在热映的图片
                    this.movieListImage = movieList.map(item=>{
                        item.img = item.img.replace('w.h','128.180');
                        var imgWidth = document.documentElement.clientWidth;
                        var imgHeight=parseInt(imgWidth/128*180)
                        item.p_img=item.img.replace('128.180',`${imgWidth}.${imgHeight}`)
                        return item.p_img
                    })
                    this.hideLoading();
                }).catch(err => {
                    console.log(err)
                    this.hideLoading();

                });
            },
            getComingList() {
                this.showLoading("正在登陆中");
                this.$http.get("/maoyanApi/ajax/comingList?ci=57&token=&limit=10").then(res => {
                    this.comingList = res.data.coming;
                    this.comingListImage = this.comingList.map(item=>{
                         item.img = item.img.replace('w.h','128.180');
                        var imgWidth = document.documentElement.clientWidth;
                        var imgHeight=parseInt(imgWidth/128*180)
                        item.p_img=item.img.replace('128.180',`${imgWidth}.${imgHeight}`)
                        return item.p_img
                    })
                    this.hideLoading();
                }).catch(err => {
                    console.log(err)
                    this.hideLoading();
                })
            },
            getHopeList() {
                this.showLoading()
                this.$http.get("/maoyanApi/ajax/mostExpected?ci=57&limit=10&offset=0&token=").then(res => {
                    this.hopeList = res.data.coming
                    this.hideLoading();
                }).catch(err => {
                    this.hideLoading()
                })
            },
           showMvoieListImage(img){
                console.log(img)
                this.showPreviewImage({
                    urls:this.movieListImage,
                    current:img.replace("w.h","128.180")
                    //当前要预览那一张
                });
            },
            showComingImageList(img){
                this.showPreviewImage({
                    urls:this.comingListImage,
                    current:p_img
                    //当前要预览那一张
                });
            }
        },
        components: {
            movieItem,
            BScroll
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .movie {
        display: flex;
        flex-direction: column;
    }

    .topNav {
        @include flexbox();
        height: .8rem;

        >li {
            flex: 1;
            @include flexbox();
            height: inherit;
            justify-content: center;
            align-items: center;

            &.active {
                color: $primaryColor;
            }
        }
    }

    .bottomBar {
        width: 100%;
        height: .02rem;
        background-color: lightgray;

        .bottomBar-swith {
            width: 50%;
            background-color: $primaryColor;
            height: inherit;
            transition: all 0.2s linear;

            &.active {
                transform: translateX(100%)
            }
        }
    }

    .movieSweiper {
        flex: 1;
        width: 100%;
        overflow: auto;
    }

    .seiperSlide {
        height: 100%;
        overflow: auto;
    }

    .hope {
        box-sizing: border-box;
        padding: .1rem;

        .list {
            @include flexbox();
            width: 100%;
            .l-item {
                @include flexbox(column);
                margin-left: .1rem;
                margin-right: .1rem;
                overflow: hidden;
                width: 1.7rem;
                img {
                    width: 1.7rem;
                    height: 2.3rem;
                    display: block;
                }

                .mn {
                    font-size: .28rem;
                    overflow:hidden;
                    text-overflow: hidden;
                    white-space: nowrap;
                }

                .mt {
                    font-size: .24rem;
                    ;
                    color: #999
                }
            }
        }
    }
</style>